<script type="text/javascript" src="/assets/base/newCharging/modules/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="/assets/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/assets/bower_components/upload/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/assets/bower_components/upload/jquery.fileupload.js"></script>
<script type="text/javascript" src="/assets/bower_components/upload/jquery.iframe-transport.js"></script>

<a href="javascript:void(0);" class="fixed-icon report-error" >
    <span class="iconfont icon-fankui"></span>
    <p>报错</p>
</a>
<div class="layer-wraper">
    <div class="main">
        <p class="title">报错反馈</p>
        <textarea placeholder="说说哪里有问题，我们来改进~" id="content"></textarea>
        <div class="clearfix upload-img">
            <p class="img-box" id="selectedPicture">
                <span class="iconfont icon-tupiantianjia"></span>
                <input class="file-input" type="file" name="upload-file" id="fileupload_input"/>
            </p>
        </div>

        <div class="pop-btn">
            <a href="#" class="btn cancel">取消</a>
            <a href="#" class="btn green-btn error-submit">确认提交</a>
        </div>
    </div>
</div>

<script>
    var protocol = $("#protocol").val();
    if(protocol == 0) {
        $(".report-error").css('display','none');
    }

    $("#fileupload_input").fileupload({
        url: "/base/common/upload",//文件上传地址，当然也可以直接写在input的data-url属性内
        beforeSend:function(){
            $('.load').show();
        },
        done: function (e, result) {
            //done方法就是上传完毕的回调函数，其他回调函数可以自行查看api
            //注意result要和jquery的ajax的data参数区分，这个对象包含了整个请求信息
            //返回的数据在result.result中，假设我们服务器返回了一个json对象
            var data = $.parseJSON(result.result);
            if (data.status == 'S') {
                $('.load').hide();

                var obj = $('.img-box .pictureError');
                console.log(obj.length);
                if(obj.length > 2) {
                    fm.alert('最多只允许上传3张图片~','',2);
                    return false;
                }
                $(".upload-img").append('<p class="img-box "><img src="'+data.url+'" class="pictureError" /></span></p>');
                fm.alert('上传图片成功~','',2);

            } else {
                fm.alert(data.message);
                return false;
            }
        }
    });


    $(document).on('click', '.report-error', function () {
        $('#content').val('');
        $("#demo").remove();
        $(".layer-wraper").show();
    })
    $(document).on('click', '.cancel', function () {
        $(".layer-wraper").hide();
    })
    $(document).on('click', '.error-submit', function () {
        var data = {};
        data.content = $('#content').val();
        data.url = '';
        var obj = $('.img-box .pictureError');
        var j = obj.length;
        for(var i=0; i<obj.length; i++) {
            data.url = data.url + obj[i].src
            if(i+1 < j) {
                data.url = data.url + '|';
            }
        }
        if(!data.content || data.content == '') {
            fm.alert('请输入问题内容~','',3);
            return false;
        }
        $.ajax({
            url: "{BEESCRM::U('/Base/NewCharging/chargingError',array('chargingId'=>$chargingId))}",
            type: "post",
            data: data,
            dataType: "json",
            success: function (res) {
                $(".layer-wraper").hide();
                fm.alert(res.message, '', 3);
            },
            error: function (res) {
                fm.alert(res.message, '', 3)
            }
        })
    })
</script>